<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";
import planApi from "@/api/planApi";
const router = useRouter();

const planId = ref("");
const plan = ref(null);

const goMenu = (key) => {
    router.push({
        name: key,
    });
};

const goExamMenu = (key) => {
    if (!planId.value) {
        Message.warning("请先选择考试计划");
        return;
    }
    var params = {
        planId: plan.value.id,
        code: plan.value.code,
        name: plan.value.name,
        state: plan.value.state,
        startDate: plan.value.startDate,
        endDate: plan.value.endDate,
        examFlag: plan.value.examFlag,
        parentId: plan.value.parentId
    };
    router.push({
        name: key,
        state: {
            params
        }
    });
}

const loading = ref(false);
const planData = ref([]);
const search = () => {
    var params = {
        pageNo: 1,
        pageSize: 10000,
        queryParam: {
            examFlag: true
        },
    };
    loading.value = true;
    planApi.page(params).then((res) => {
        planData.value = res.records;
        loading.value = false;
    });
};

const queryPlanDetailById = (pID) => {
    planApi.detailById({
        planId: pID
    }).then(res => {
        plan.value = res;
    })
}

search();

</script>
<template>
    <div class="main-con flex">
        <div class="flex1">

            <a-card title="1、配置基础信息">
                <a-grid :cols="{ xs: 1, sm: 2, md: 2, lg: 2, xl: 3, xxl: 5 }" :colGap="16" :rowGap="16">
                    <a-grid-item class="plan-block-item" @click="goMenu('schoolStudent')">
                        <img src="@/assets/student.png" alt="">
                        <div class="text-wrap">
                            <div class="title">学生信息管理</div>
                            <div class="desc">一键导入学生，自动生成班级数据</div>
                        </div>
                    </a-grid-item>
                </a-grid>
            </a-card>
            <a-card title="2、考试规则设置" style="margin-top: 10px;">
                <a-grid :cols="{ xs: 1, sm: 2, md: 2, lg: 2, xl: 3, xxl: 5 }" :colGap="16" :rowGap="16">
                    <a-grid-item class="plan-block-item" @click="goMenu('scoreTemp')">
                        <img src="@/assets/score_template.png" alt="">
                        <div class="text-wrap">
                            <div class="title">评分模板管理</div>
                            <div class="desc">评分模板关联计划，用以报名报项</div>
                        </div>
                    </a-grid-item>
                </a-grid>
            </a-card>
            <a-card title="3、考试计划管理" style="margin-top: 10px;">
                <template #extra>
                    <a-space>
                        <a-select style="width: 300px;" @change="queryPlanDetailById" v-model="planId"
                            placeholder="请选择考试计划">
                            <a-option v-for="plan in planData" :key="plan.id" :label="plan.name"
                                :value="plan.id"></a-option>
                        </a-select>
                        <a-button type="outline" @click="goMenu('examPlan')">
                            <template #icon>
                                <icon-eye></icon-eye>
                            </template>
                            查看所有计划
                        </a-button>
                    </a-space>
                </template>
                <a-grid :cols="{ xs: 1, sm: 2, md: 2, lg: 2, xl: 3, xxl: 3 }" :colGap="16" :rowGap="16">
                    <a-grid-item class="plan-block-item" @click="goExamMenu('planStudent')">
                        <img src="@/assets/exam_std.png" alt="">
                        <div class="text-wrap">
                            <div class="title">考生管理</div>
                            <div class="desc">用户维护考生、免考、缓考、择考状态</div>
                        </div>
                    </a-grid-item>
                    <a-grid-item class="plan-block-item" @click="goExamMenu('planApply')">
                        <img src="@/assets/exam_apply.png" alt="">
                        <div class="text-wrap">
                            <div class="title">报名报项管理</div>
                            <div class="desc">按照评分模板，确认学生报考项目</div>
                        </div>
                    </a-grid-item>
                    <a-grid-item class="plan-block-item" @click="goExamMenu('planArrange')">
                        <img src="@/assets/bianpai.png" alt="">
                        <div class="text-wrap">
                            <div class="title">计划编排</div>
                            <div class="desc">编排计划内考生，生成编排表</div>
                        </div>
                    </a-grid-item>
                    <a-grid-item class="plan-block-item" @click="goExamMenu('planCheckIn')">
                        <img src="@/assets/exam_checkin.png" alt="">
                        <div class="text-wrap">
                            <div class="title">计划检录</div>
                            <div class="desc">检录本次考试学生</div>
                        </div>
                    </a-grid-item>
                    <a-grid-item class="plan-block-item" @click="goExamMenu('planPublicity')">
                        <img src="@/assets/exam_public.png" alt="">
                        <div class="text-wrap">
                            <div class="title">成绩公示</div>
                            <div class="desc">公示本次考生成绩</div>
                        </div>
                    </a-grid-item>
                    <a-grid-item class="plan-block-item" @click="goExamMenu('planResult')">
                        <img src="@/assets/exam_record.png" alt="">
                        <div class="text-wrap">
                            <div class="title">成绩上传及更新记录</div>
                            <div class="desc">成绩上传及更新记录的信息管理</div>
                        </div>
                    </a-grid-item>
                    <a-grid-item class="plan-block-item" @click="goExamMenu('planSummary')">
                        <img src="@/assets/exam_count.png" alt="">
                        <div class="text-wrap">
                            <div class="title">成绩汇总查询</div>
                            <div class="desc">成绩汇总查询</div>
                        </div>
                    </a-grid-item>
                    <a-grid-item class="plan-block-item" @click="goExamMenu('planSummaryScore')">
                        <img src="@/assets/exam_summary.png" alt="">
                        <div class="text-wrap">
                            <div class="title">成绩等级评分汇总查询</div>
                            <div class="desc">成绩等级评分汇总查询</div>
                        </div>
                    </a-grid-item>
                </a-grid>
            </a-card>
        </div>
        <div style="background-color: #fff;width:300px;margin-left: 16px;">
            <a-card title="考试系统流程">
                <a-timeline>
                    <a-timeline-item label="管理员">配置学生信息</a-timeline-item>
                    <a-timeline-item label="管理员">配置评分模板</a-timeline-item>
                    <a-timeline-item label="管理员">新建考试计划</a-timeline-item>
                    <a-timeline-item label="管理员">报名报项</a-timeline-item>
                    <a-timeline-item label="管理员">编排计划</a-timeline-item>
                    <a-timeline-item label="管理员/检录人员">检录</a-timeline-item>
                    <a-timeline-item label="管理员/公示人员">成绩公示</a-timeline-item>
                    <a-timeline-item label="管理员/仲裁人员">成绩仲裁</a-timeline-item>
                    <a-timeline-item label="管理员">成绩管理</a-timeline-item>
                </a-timeline>
            </a-card>
        </div>
    </div>
</template>
<style>
.plan-block-item {
    width: 100%;
    height: 96px;
    min-width: 258px;
    max-width: 370px;
    border-radius: 4px;
    background: #f6f7fb;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 5px 16px;
    cursor: pointer;
    transition: color .3s cubic-bezier(.4, 0, .2, 1), background-color .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1);
}

.plan-block-item img {
    width: 40px;
    height: 40px;
    margin-right: 5px;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.text-wrap {
    text-wrap: wrap;
}

.plan-block-item .text-wrap .title {
    height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #2a2e36;
    line-height: 20px;
    margin-bottom: 6px;
}


.plan-block-item .text-wrap .desc {
    height: 17px;
    font-size: 12px;
    font-weight: 300;
    color: #8d96a2;
    line-height: 17px;
}
</style>